<template>
  <view class="time-range-section">
    <view class="time-input-group">
      <input
        v-model="startTime"
        :placeholder="startPlaceholder"
        class="time-input"
        :disabled="disabled"
        @input="onStartTimeChange"
        @focus="onStartFocus"
      />
      <image
        class="clock-icon"
        src="/static/img/components/clock-icon.png"
        mode="widthFix"
      />
    </view>
    <view class="time-input-group">
      <input
        v-model="endTime"
        :placeholder="endPlaceholder"
        class="time-input"
        :disabled="disabled"
        @input="onEndTimeChange"
        @focus="onEndFocus"
      />
      <image
        class="clock-icon"
        src="/static/img/components/clock-icon.png"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ start: '', end: '' })
  },
  startPlaceholder: {
    type: String,
    default: '-- : --'
  },
  endPlaceholder: {
    type: String,
    default: '-- : --'
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'change', 'start-focus', 'end-focus']);

// 内部数据
const startTime = ref('');
const endTime = ref('');

// 初始化数据
const initData = () => {
  startTime.value = props.modelValue?.start || '';
  endTime.value = props.modelValue?.end || '';
};

// 组件挂载时初始化
initData();

// 监听外部数据变化
watch(() => props.modelValue, (newVal) => {
  startTime.value = newVal?.start || '';
  endTime.value = newVal?.end || '';
}, { deep: true, immediate: true });

// 监听内部数据变化
watch([startTime, endTime], ([newStart, newEnd]) => {
  const newValue = { start: newStart, end: newEnd };
  emit('update:modelValue', newValue);
  emit('change', newValue);
}, { deep: true });

// 事件处理函数
const onStartTimeChange = (e) => {
  startTime.value = e.detail.value;
};

const onEndTimeChange = (e) => {
  endTime.value = e.detail.value;
};

const onStartFocus = () => {
  emit('start-focus');
};

const onEndFocus = () => {
  emit('end-focus');
};
</script>

<style scoped lang="scss">
.time-range-section {
  display: flex;
  gap: 20rpx;
  margin-top: 16rpx;
}

.time-input-group {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.time-input {
  flex: 1;
  height: 52rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4rpx;
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}

.clock-icon {
  position: absolute;
  right: 16rpx;
  width: 20rpx;
  height: 20rpx;
  pointer-events: none;
}
</style> 